<toggle-visible data-element-ids="[&quot;js_1&quot;,&quot;react_1&quot;,&quot;vue_1&quot;]" class="block relative" data-catalyst="">
  <ul class="items-center w-full text-sm font-medium text-gray-900 my-4 space-y-2 sm:space-y-0 sm:flex sm:space-x-2">
    <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
      <input type="radio" name="option_1" id="js_radio_1" value="js_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden" checked="checked">
      <label for="js_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
        <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
            <path fill="#ffd600" d="M6,42V6h36v36H6z"></path><path fill="#000001" d="M29.538 32.947c.692 1.124 1.444 2.201 3.037 2.201 1.338 0 2.04-.665 2.04-1.585 0-1.101-.726-1.492-2.198-2.133l-.807-.344c-2.329-.988-3.878-2.226-3.878-4.841 0-2.41 1.845-4.244 4.728-4.244 2.053 0 3.528.711 4.592 2.573l-2.514 1.607c-.553-.988-1.151-1.377-2.078-1.377-.946 0-1.545.597-1.545 1.377 0 .964.6 1.354 1.985 1.951l.807.344C36.452 29.645 38 30.839 38 33.523 38 36.415 35.716 38 32.65 38c-2.999 0-4.702-1.505-5.65-3.368L29.538 32.947zM17.952 33.029c.506.906 1.275 1.603 2.381 1.603 1.058 0 1.667-.418 1.667-2.043V22h3.333v11.101c0 3.367-1.953 4.899-4.805 4.899-2.577 0-4.437-1.746-5.195-3.368L17.952 33.029z"></path>
          </svg>
        </span>
        <span>JavaScript</span>
      </label>
    </li>
    <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
      <input type="radio" name="option_1" id="react_radio_1" value="react_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden">
      <label for="react_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
        <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="-11.5 -10.23174 23 20.46348">
            <circle cx="0" cy="0" r="2.05" fill="#61dafb"></circle>
            <g stroke="#61dafb" stroke-width="1" fill="none">
              <ellipse rx="11" ry="4.2"></ellipse>
              <ellipse rx="11" ry="4.2" transform="rotate(60)"></ellipse>
              <ellipse rx="11" ry="4.2" transform="rotate(120)"></ellipse>
            </g>
          </svg>
        </span>
        <span>React</span>
      </label>
    </li>
    <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
      <input type="radio" name="option_1" id="vue_radio_1" value="vue_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden">
      <label for="vue_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
        <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" version="1.1" viewBox="0 0 261.76 226.69"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"></path></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"></path></g></g></svg>
        </span>
        <span>Vue</span>
      </label>
    </li>
  </ul>
</toggle-visible>
<div id="js_1" class="block my-4">
    <div class="mockup-code overflow-hidden pb-0 mt-4">
      <span class="top-0 right-0 absolute flex">
        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
        <clipboard-copy data-text="<script src=&quot;<%= Docuseal::CDN_URL %>/js/form.js&quot;></script>

<docuseal-form data-src=&quot;<%= start_form_url(slug: template.slug) %>&quot;></docuseal-form>
">
  <label class="btn btn-ghost text-gray-100">
    <input type="radio" class="peer hidden">
    <span class="peer-checked:hidden flex items-center space-x-2">
      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
      <span class="hidden md:inline">
        Copy
      </span>
    </span>
    <span class="hidden peer-checked:flex items-center space-x-2">
      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
      <span class="hidden md:inline">
        Copied
      </span>
    </span>
  </label>
</clipboard-copy>

      </span>
      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #f4bf75">&lt;script </span><span style="color: #6a9fb5">src=</span><span style="color: #90a959">"<%= Docuseal::CDN_URL %>/js/form.js"</span><span style="color: #f4bf75">&gt;&lt;/script&gt;</span>

<span style="color: #f4bf75">&lt;docuseal-form</span> <span style="color: #6a9fb5">data-src=</span><span style="color: #90a959">"<%= start_form_url(slug: template.slug) %>"</span><span style="color: #f4bf75">&gt;</span><span style="color: #f4bf75">&lt;/docuseal-form&gt;</span>
</code></pre>
    </div>

  </div>
<div id="react_1" class="block my-4 hidden">
    <div class="mockup-code overflow-hidden pb-0 mt-4">
      <span class="top-0 right-0 absolute flex">
        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
        <clipboard-copy data-text="import React from &quot;react&quot;
import { DocusealForm } from '@docuseal/react'

export function App() {
  return (
    <DocusealForm
      src=&quot;<%= start_form_url(slug: template.slug) %>&quot;
    />
  );
}
">
  <label class="btn btn-ghost text-white">
    <input type="radio" class="peer hidden">
    <span class="peer-checked:hidden flex items-center space-x-2">
      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
      <span class="hidden md:inline">
        Copy
      </span>
    </span>
    <span class="hidden peer-checked:flex items-center space-x-2">
      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
      <span class="hidden md:inline">
        Copied
      </span>
    </span>
  </label>
</clipboard-copy>

      </span>
      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #aa759f">import</span> <span style="color: #d0d0d0;background-color: #151515">React</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">"</span><span style="color: #90a959">react</span><span style="color: #90a959">"</span>
<span style="color: #aa759f">import</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">'</span><span style="color: #90a959">@docuseal/react</span><span style="color: #90a959">'</span>

<span style="color: #aa759f">export</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">App</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
  <span style="color: #aa759f">return </span><span style="color: #d0d0d0">(</span>
    <span style="color: #d0d0d0">&lt;</span><span style="color: #f4bf75">DocusealForm</span>
      <span style="color: #6a9fb5">src</span><span style="color: #d0d0d0">=</span><span style="color: #90a959">"<%= start_form_url(slug: template.slug) %>"</span>
    <span style="color: #d0d0d0">/&gt;</span>
  <span style="color: #d0d0d0">);</span>
<span style="color: #d0d0d0">}</span>
</code></pre>
    </div>

  </div>
<div id="vue_1" class="block my-4 hidden">
    <div class="mockup-code overflow-hidden pb-0 mt-4">
      <span class="top-0 right-0 absolute flex">
        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
        <clipboard-copy data-text="<template>
  <DocusealForm
    :src=&quot;'<%= start_form_url(slug: template.slug) %>'&quot;
  />
</template>

<script>
import { DocusealForm } from '@docuseal/vue'

export default {
  name: 'App',
  components: {
    DocusealForm
  }
}
</script>
">
  <label class="btn btn-ghost text-white">
    <input type="radio" class="peer hidden">
    <span class="peer-checked:hidden flex items-center space-x-2">
      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
      <span class="hidden md:inline">
        Copy
      </span>
    </span>
    <span class="hidden peer-checked:flex items-center space-x-2">
      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
      <span class="hidden md:inline">
        Copied
      </span>
    </span>
  </label>
</clipboard-copy>

      </span>
      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #f4bf75">&lt;template&gt;</span>
  <span style="color: #f4bf75">&lt;DocusealForm</span>
    <span style="color: #6a9fb5">:src=</span><span style="color: #90a959">"'<%= start_form_url(slug: template.slug) %>'"</span>
  <span style="color: #f4bf75">/&gt;</span>
<span style="color: #f4bf75">&lt;/template&gt;</span>

<span style="color: #f4bf75">&lt;</span><span style="color: #f4bf75">script</span><span style="color: #f4bf75">&gt;</span>
<span style="color: #aa759f">import</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">'</span><span style="color: #90a959">@docuseal/vue</span><span style="color: #90a959">'</span>

<span style="color: #aa759f">export</span> <span style="color: #aa759f">default</span> <span style="color: #d0d0d0">{</span>
  <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">'</span><span style="color: #90a959">App</span><span style="color: #90a959">'</span><span style="color: #d0d0d0">,</span>
  <span style="color: #6a9fb5">components</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
    <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span>
  <span style="color: #d0d0d0">}</span>
<span style="color: #d0d0d0">}</span>
<span style="color: #f4bf75">&lt;/</span><span style="color: #f4bf75">script</span><span style="color: #f4bf75">&gt;</span>
</code></pre>
  </div>
</div>
